<template>
    <div>
        
        <el-select v-model="province" clearable placeholder="请选择" @change="selectProvinceDone">
            <el-option
            v-for="(item,index) in list"
            :key="index"
            :label="item.name"
            :value="item.name">
            </el-option>
        </el-select>

        <el-select v-model="city" clearable placeholder="请选择" @change="selectCityDone">
            <el-option
            v-for="(item,index) in province!==''&&list.find(item=>item.name===province).city"
            :key="index"
            :label="item.name"
            :value="item.name">
            </el-option>
        </el-select>

        <el-select v-model="area" clearable placeholder="请选择">
            <el-option
            v-for="(item,index) in city!==''&&list.find(item=>item.name===province).city.find(k=>k.name===city).area"
            :key="index"
            :label="item"
            :value="item">
            </el-option>
        </el-select>



        <el-input v-model="address" @blur="searchAddress"/>
        <p>经度{{longitude}}纬度{{latitude}}</p>
    </div>
</template>
<script>
import axios from 'axios'
import data from './cityArea.json'
export default {
    data(){
        return {
            address:'',
            longitude:"",
            latitude:"",

            province:'',
            city:'',
            area:'',
            list:data

        }
    },
    methods:{
        // 经纬度
        async searchAddress(){
            let res = await axios.get(`http://restapi.amap.com/v3/geocode/geo?address=${this.address}&key=a4caa0d785006c615cfac81918294acf`);
            let arr = res.data.geocodes[0].location.split(',')
            this.longitude = arr[0];
            this.latitude = arr[1]
        },


        // 选择省
        selectProvinceDone(value){
                this.city = ''
                this.area='' 
        },
        // 选择市
        selectCityDone(value){
                this.area='' 
        }
    }

}
</script>